<template>
        <div class="header">
            <input type="text" v-model="text" placeholder="输入任务名称">
            <span @click="pushElement()">新增</span>

        </div>
</template>

<script>
export default {
    data(){
        return{
            text:''
        }
    },
    methods:{
        pushElement(){
            this.$store.commit('addTask');
            this.text=''
        }
    }
}
</script>

<style lang="scss" scoped>
 .header {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }
        .header input{
            width: 70%;
            height: 20px;
            padding: 5px;
            border-radius: 5px;
            background-color: #ccc;
            border: none;
            outline: none;
        }
        .header span {
            color: green;
            display: inline-block;
            height: 20px;
            padding: 5px;
            border-radius: 5px;
            background-color: aliceblue;
        }
</style>